<template>
	<view class="personnelManagement">
		<view class="personnelManagement-header">
			<view class="ff-color-fff ff-font-17 ff-font-weight-600 ff-margin-bottom-10">消防控制室持证人员</view>
			<view class="personnelManagement-header-tips ff-font-13">仅用于信息登记，非创建账号 | 已登记人数：{{numUser}}人</view>
		</view>
		<view class="ff-padding-bottom-40">
			<view class="personnelManagement-content" v-if="certificateList.length > 0">
				<view v-for="(item, index) of certificateList" :key="index"
					class="personnelManagement-content-box ff-border-radius-10 ff-margin-bottom-10 ff-bg-fff">
					<view class="ff-flex-between ff-align-items-one" @click="holderEditClick(item)">
						<view class="ff-align-items">
							<image class="personnelManagement-content-box-headerImg"
								src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/holder-icon.png"
								mode=""></image>
							<view class="personnelManagement-content-box-info ff-flex-1 ff-margin-left-12">
								<view class="ff-font-16 ff-font-weight-600 ff-margin-bottom-12">{{ item.staffName }}
								</view>
								<view class="ff-font-12 ff-color-5C5F65">
									<view class="ff-flex ff-margin-bottom-6">
										<view>职业资格证书：</view>
										<view class="ff-flex-1">
											{{ item.certificateLevel == 3?'三级/高级技能': item.certificateLevel == 4?'四级/中级技能':item.certificateLevel == 5?'五级/初级技能':'--'}}
										</view>
									</view>
									<view>证书编号：{{ item.certificateNumber }}</view>
								</view>
							</view>
						</view>
						<view class="personnelManagement-content-box-but">
							<u-icon name="arrow-right" color="#666666" size="28"></u-icon>
						</view>
					</view>
				</view>
				<u-divider v-if="noData" border-color="#909399" height="120" margin-bottom="30" color="#909399"
					bg-color="#f5f5f5">没有更多了</u-divider>
			</view>
			<f-noData v-else :topStyle.sync="topStyleAdmin"></f-noData>
		</view>
		<view class="personnelManagement-but"><u-button type="primary" @click="addCertificateGo">添加持证人员</u-button>
		</view>
		<u-back-top :scrollTop="scrollTop" top="200" mode="circle" :iconStyle="iconStyle"
			:customStyle="customstyle"></u-back-top>
		<!-- -----------------------------弹框区------------------------------ -->
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
	</view>
</template>

<script>
	export default {
		name: 'personnelManagement',
		data() {
			return {
				numUser: '', // 持证人数
				topStyleAdmin: '20%',
				scrollTop: 0,
				iconStyle: {
					fontSize: '32rpx',
					color: '#FFFFFF'
				},
				customstyle: {
					background: '#3B83FE'
				},
				// 持证人列表数据
				certificateList: [],
				params: {
					current: 1,
					size: 8,
				},
				noData: false, // 暂时没有更多数据state
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad() {
			this.getcertificateList(); // 获取持证人列表数据
		},
		onShow() {
			this.params.current = 1
			this.getcertificateList(); // 获取持证人列表数据
		},
		// 上拉加载
		onReachBottom() {
			this.params.current++;
			this.getcertificateList(); // 获取持证人列表数据
		},
		// 下拉刷新 
		onPullDownRefresh() {
			let that = this;
			that.params.current = 1;
			that.getcertificateList(); // 获取持证人列表数据
			setTimeout(() => {
				that.$refs.uToast.show({
					title: '刷新成功',
					type: 'success'
				});
				uni.stopPullDownRefresh(); // 停止刷新
			}, 100);
		},
		methods: {
			// 获取持证人列表数据
			async getcertificateList() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.post({
					url: '/BsCompanyFireControlRoomCert/cert/page',
					data: this.params
				});
				// console.log('获取持证人列表数据-------', data);
				this.$refs.loading.closeLoading(); // 关闭loading动画
				if (data.code == 200) {
					const infoList = data.data.records;
					this.numUser = data.data.total
					if (infoList.length == 0 && this.params.current == 1) {
						// console.log('首次加载没数据');
						this.noData = false;
						this.certificateList = [];
					} else if (infoList.length < 6 && this.params.current == 1) {
						// console.log('首次加载有数据');
						this.noData = true;
						this.certificateList = infoList;
					} else if (infoList.length !== 0 && this.params.current == 1) {
						// console.log('首次加载有数据');
						this.noData = false;
						this.certificateList = infoList;
					} else if (infoList.length !== 0 && this.params.current > 1) {
						// console.log('上拉加载更多数据');
						this.noData = false;
						this.certificateList = this.certificateList.concat(infoList);
					} else if (infoList.length == 0 && this.params.current > 1) {
						// console.log('上拉加载没有更多数据了');
						this.noData = true;
					}
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
			},
			// 跳转新增持证人的页面
			addCertificateGo() {
				this.$pageJump.navigateTo(
					'/pages/maintenance/company/home/components/personnelManagement/components/addHolder?type=' + 1);
			},
			// 跳转修改持证人信息
			holderEditClick(item) {
				this.$pageJump.navigateTo(
					'/pages/maintenance/company/home/components/personnelManagement/components/addHolder?id=' + item.id
				);
			},
		},
		onShareAppMessage() {
			return {
				title: '分享小程序给朋友',
				path: '/pages/homePage/Home'
			};
		}
	};
</script>

<style lang="scss" scoped>
	.personnelManagement {
		/deep/.u-badge--bg--error {
			right: 30% !important;
		}


		&-header {
			background: url('https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/hloder-bg.png') no-repeat;
			background-size: 100%;
			height: 257rpx;
			padding: 40rpx 42rpx;

			&-tips {
				color: #CEDEFF;
			}
		}

		&-content {
			margin: -100rpx 24rpx 20rpx;

			&-box {
				padding: 30rpx;

				&-headerImg {
					width: 96rpx;
					height: 96rpx;
				}

				&-info {
					.ff-font-16 {
						color: #0b0e11;
					}

					.ff-font-14 {
						color: #5c5f65;
					}

					image {
						width: 25rpx;
						height: 25rpx;
						margin: 0 3rpx -3rpx 0;
					}
				}

				&-but {
					.but1 {
						color: #ef312e;
					}

					.but2 {
						background-color: #3178ff;
						padding: 16rpx 30rpx;
					}

					.but3 {
						color: #3178ff;
					}
				}
			}
		}

		&-but {
			padding-bottom: env(safe-area-inset-bottom); // 针对iphone xr等系列的刘海底部屏幕做的适配
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #ffffff;

			/deep/.u-size-default {
				height: 100rpx !important;
				line-height: 100rpx !important;
			}
		}
	}
</style>